import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

import '../BodyDataInput.scss';
import LayoutView, { LayoutMode } from '../../layout';
import { SelectItemList, SelectItem } from '../../common-ui-parts';
import { BodyItemConstant as BiC } from '../../../constants/InputItemConstants';
import { BodyDataInputContextConstant } from '../../../constants/ComponentContextConstants';
import { MultipleValidationCategory as MvC } from '../../../validations/BodyDataInputValidation';
import CommonConstants from '../../../constants/CommonConstants';

// 質問に関するイラスト
import imgQ4 from './images/imgQ4.png';

/**
 * Q04.飲酒頻度
 */
class Question04 extends Component {
  getChildContext() {
    const { [BiC.ALCOHOL_HABIT]: habit, [BiC.ALCOHOL_FREQUENCY]: frequency } = this.context.parent.inputData;
    return Object.freeze({
      parent: Object.freeze(Object.assign({}, this.context.parent, {
        // 未入力の場合 and 飲酒習慣＝「飲まない」以外の場合、[次へ]ボタンは無効
        disabledNext: frequency === undefined &&
                      habit !== BiC.ALCOHOL_HABIT.NO_DRINKING.value,
      })),
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return CommonConstants.ALCOHOL_INDEXES.includes(this.context.parent.pageIndex);
  }

  scrollPageTop() {
    this.refs.layoutView.getWrappedInstance().scrollTop();
  }

  validatePage() {
    // 入力チェック（true:チェックOK）
    return this.context.parent.validateQuestionPage([BiC.ALCOHOL_FREQUENCY], [MvC.ALCOHOL_FREQUENCY]);
  }

  render() {
    const { inputData, errorInfo, updateState, handleSelectAlcoholFrequency } = this.context.parent;

    // 飲酒習慣＝「飲まない」場合は、非活性
    const disabledInput = inputData[BiC.ALCOHOL_HABIT] === BiC.ALCOHOL_HABIT.NO_DRINKING.value;

    return (
      <LayoutView
        ref="layoutView"
        mode={LayoutMode.QUESTION}
        title="飲酒頻度"
        question={{
          no: 4,
          sentence: <p>どれくらいの頻度で飲みますか？<br/>（飲んでいましたか？）<br/><br/></p>,
          illustSrc: imgQ4,
          illustHeight: 198,
        }}
        errorText={errorInfo.get(BiC.ALCOHOL_FREQUENCY, MvC.ALCOHOL_FREQUENCY)}
      >
        {/* 入力項目非活性状態の場合には「メッセージ（入力不要案内のテキスト）」を表示 */}
        { disabledInput &&
          <div className="guidance-alcohol-frequency">
            <p>飲酒習慣が飲まないの場合は<br/>入力不要です。<br/>次の質問へお進みください。 </p>
          </div> }  
        {/* 飲酒頻度 */}
        <dl className={classNames('content', { 'disabled': disabledInput })}>
          <dt style={{ display: 'none' }}>{BiC.ALCOHOL_FREQUENCY.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_FREQUENCY}
              value={inputData[BiC.ALCOHOL_FREQUENCY]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
              onChange={handleSelectAlcoholFrequency}
            >
              {BiC.ALCOHOL_FREQUENCY.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>
      </LayoutView>
    );
  }

}

Question04.contextTypes = BodyDataInputContextConstant;
Question04.childContextTypes = Question04.contextTypes;

/*Question04.propTypes = {
  index: PropTypes.number,    // 自ページINDEX（0～）
};*/

export default Question04
